<template>
  <!-- 购买产品 -->
  <div class="produc new">
    <div class="produc-banner"></div>
    <div class="container">
        <div class="flex-between m40">
            <div class="box-240-360">
              <img src="../assets/static/39.png" />
            </div>
            <div class="box-940">
                <div class="box-300-360" v-for="(item,index ) in purchasedetails1">
                    <h2>{{ item.title }}</h2>
                    <div class="purchase-cn">
                      <p v-html="item.content"></p>
                    </div>
                    <div class="purchase-list flex-between-center">
                            <a class="purchase-buy-one" href="https://geezf.net/" target="_black">{{ item.payPirce }}</a>
        
                            <a :href="item.downUrl" target="_blank" v-if="isShow==0" class="purchase-buy">
                              <span>立即购买</span>
                            </a>
                            <a :href="item.downUrl" target="_blank" v-if="isShow==1" class="purchase-buy">
                              <span>立即下载</span>
                            </a>

                            <a :href="item.downUrl" target="_blank" v-if="isShow==2" class="purchase-buy">
                              <span>联系安装</span>
                            </a>
                    </div>
                </div>
                
            </div>
        </div>
        <div class="flex-between m40">
            <div class="box-240-360">
              <img src="../assets/static/40.png" />
            </div>
            <div class="box-940">
                <div class="box-300-360" v-for="(item,index ) in purchasedetails2">
                    <h2>{{ item.title }}</h2>
                    <div class="purchase-cn">
                      <p v-html="item.content"></p>
                    </div>
                    <div class="purchase-list flex-between-center">
                            <a class="purchase-buy-one" href="https://geezf.net/" target="_black">{{ item.payPirce }}</a>
        
                            <a :href="item.downUrl" target="_blank" v-if="isShow==0" class="purchase-buy">
                              <span>立即购买</span>
                            </a>
                            <a :href="item.downUrl" target="_blank" v-if="isShow==1" class="purchase-buy">
                              <span>立即下载</span>
                            </a>

                            <a :href="item.downUrl" target="_blank" v-if="isShow==2" class="purchase-buy">
                              <span>联系安装</span>
                            </a>
                    </div>
                </div>
                
            </div>
        </div>
        <div class="flex-between m40">
            <div class="box-240-360">
              <img src="../assets/static/41.png" />
            </div>
            <div class="box-940">
                <div class="box-300-360" v-for="(item,index ) in purchasedetails3">
                    <h2>{{ item.title }}</h2>
                    <div class="purchase-cn">
                      <p v-html="item.content"></p>
                    </div>
                    <div class="purchase-list flex-between-center">
                            <a class="purchase-buy-one" href="https://geezf.net/" target="_black">{{ item.payPirce }}</a>
        
                            <a :href="item.downUrl" target="_blank" v-if="isShow==0" class="purchase-buy">
                              <span>立即购买</span>
                            </a>
                            <a :href="item.downUrl" target="_blank" v-if="isShow==1" class="purchase-buy">
                              <span>立即下载</span>
                            </a>

                            <a :href="item.downUrl" target="_blank" v-if="isShow==2" class="purchase-buy">
                              <span>联系安装</span>
                            </a>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
    <div class="area-row container">
      <div class="row area-row-c">
        <div v-for="item,i in produc" :key="i">
          <div class="server_hover" @mouseenter="change(i)">
            <p :class="isShow==i?'atv icon-document icon-document-'+i+'':'icon-document icon-document-'+i+''"></p>
            <p :style="isShow==i?'color: #ff7601':''">{{item.title}}</p>
          </div>
        </div>

      </div>
      <div class="row flex-container">
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 mb-40 " v-for="(item,index ) in purchasedetails1" v-if="isShow==0" :key="index">
          <div class="area-row-box">
            <h2>{{ item.title }}</h2>
            <div class="purchase-cn">
              <p v-html="item.content"></p>
            </div>
            <div class="purchase-buy-one">
              <a href="https://geezf.net/" target="_black">{{ item.payPirce }}</a>
            </div>
            <div v-if="isShow==0" class="purchase-buy">
              <a :href="item.downUrl" target="_blank">
                <span>立即购买</span>
              </a>
            </div>
            <div v-if="isShow==1" class="purchase-buy">
              <a :href="item.downUrl" target="_blank">
                <span>立即下载</span>
              </a>
            </div>
            <div v-if="isShow==2" class="purchase-buy">
              <a :href="item.downUrl" target="_blank">
                <span>联系安装</span>
              </a>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 mb-40 " v-for="(item,index ) in purchasedetails2" v-if="isShow==1" :key="index">
          <div class="area-row-box">
            <h2>{{ item.title }}</h2>
            <div class="purchase-cn">
              <p v-html="item.content"></p>
            </div>
            <div class="purchase-buy-one">
              <a href="https://geezf.net/" target="_black">{{ item.payPirce }}</a>
            </div>
            <div v-if="isShow==0" class="purchase-buy">
              <a :href="item.downUrl" target="_blank">
                <span>立即购买</span>
              </a>
            </div>
            <div v-if="isShow==1" class="purchase-buy">
              <a :href="item.downUrl" target="_blank">
                <span>立即下载</span>
              </a>
            </div>
            <div v-if="isShow==2" class="purchase-buy">
              <a :href="item.downUrl" target="_blank">
                <span>联系安装</span>
              </a>
            </div>
          </div>
        </div>

        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 mb-40 " v-for="(item,index ) in purchasedetails3" v-if="isShow==2" :key="index">
          <div class="area-row-box">
            <h2>{{ item.title }}</h2>
            <div class="purchase-cn">
              <p v-html="item.content"></p>
            </div>
            <div class="purchase-buy-one">
              <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=89348505&amp;site=qq&amp;menu=yes" target="_black">{{ item.payPirce }}</a>
            </div>
            <div v-if="isShow==0" class="purchase-buy">
              <a :href="item.downUrl" target="_blank">
                <span>立即购买</span>
              </a>
            </div>
            <div v-if="isShow==1" class="purchase-buy">
              <a :href="item.downUrl" target="_blank">
                <span>立即下载</span>
              </a>
            </div>
            <div v-if="isShow==2" class="purchase-buy">
              <a :href="item.downUrl" target="_blank">
                <span>联系购买</span>
              </a>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import api from '../api/index'
export default {
  name: 'purchase',
  data () {
    return {
      produc: '',
      purchasedetails1: '',
      purchasedetails2: '',
      purchasedetails3: '',
      isShow: 0
    }
  },

  mounted () {
    api.purchaselist().then(res => {
      var data = res.data.data.list
      this.produc = data

      api.purchasedetails({ purchaseId: data[0].id }).then(res => {
        this.purchasedetails1 = res.data.data.list
      })
      api.purchasedetails({ purchaseId: data[1].id }).then(res => {
        this.purchasedetails2 = res.data.data.list
      })
      api.purchasedetails({ purchaseId: data[2].id }).then(res => {
        this.purchasedetails3 = res.data.data.list
      })
    })
  },
  methods: {
    change (index) {
      this.isShow = index
    }
  }
}
</script>
<style scoped>
.server_hover {
  width: 100%;
  font-size: 0.18rem;
}
</style>
